<section>

  <!-- main content start-->
  <div class="main-content" >

    <div class="panel-body" style="margin-bottom: -15px;">
      <!--<span>-->
      <!--<i class="fa  fa-2x fa-save"></i>-->
      <!--</span>-->
    </div>

    <!--body wrapper start-->
    <div class="wrapper">

      <div class="row" style="margin-top: 10px;">
        <div class="col-md-12">
          <section class="panel">
            <header class="panel-heading custom-tab dark-tab">
              <ul class="nav nav-tabs">
                <li class="active" >
                  <a href="#panel-1" data-toggle="tab">&nbsp;详情&nbsp;</a>
                </li>
                <li>
                  <a href="#panel-2" data-toggle="tab">用车维护</a>
                </li>
                <li>
                  <a href="#panel-3" data-toggle="tab">出车记录</a>
                </li>
              </ul>
            </header>
            <div class="panel-body">
              <div class="tab-content">
                <div class="tab-pane active" id="panel-1">
                  <form [formGroup]="vehicleForm" (ngSubmit)="onSubmit(vehicleForm.value)" class="form-horizontal">

                  <div class="panel-body">
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  ><span class="necessary">*</span>车辆名称&nbsp;</label>
                        <input formControlName="name" type="text" class="form-control " id="name"/>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >车辆类型&nbsp;</label>
                        <div class="">
                          <select  formControlName="vehicleType" class="selectpicker form-control" style="height: 34px" id="vehicleType"
                          >
                            <option *ngFor="let vehicleType of vehicleTypes" [value]="vehicleType.oid">{{vehicleType.name}}</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  ><span class="necessary">*</span>车牌号&nbsp;</label>
                        <input formControlName="licenseNumber" type="text" class="form-control " id="licenseNumber"/>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >用油类型&nbsp;</label>
                        <div class="">
                          <select formControlName="gasolineType" class="selectpicker form-control selector" style="height: 34px" id="gasolineType"
                          >
                            <option *ngFor="let gType of gasolineTypes" [value]="gType.id">{{gType.name}}</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >排量&nbsp;</label>
                        <input formControlName="displacement" type="text" class="form-control " id="displacement"/>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >平均油耗&nbsp;</label>
                        <input formControlName="averageConsumption" type="text" class="form-control " id="averageConsumption"/>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >司机&nbsp;</label>
                        <div class="input-group  ">
                          <input formControlName="driver" type="hidden" class="form-control " id="driver"/>
                          <input readonly formControlName="driverName" type="text" class="form-control " id="driverName"/>
                          <span class="input-group-btn" >
                            <button id="btn_select_onclick" type="button" class="btn btn-default" style="background: #424F63;color: #fff;" (click)="btn_select_onclick()" >
                                <i class="fa fa-angle-down"></i>
                            </button>
                      </span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >司机电话&nbsp;</label>
                        <input readonly formControlName="driverPhone" type="text" class="form-control " id="driverPhone"/>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>购买日期&nbsp;</label>
                        <div class="input-group date" id="purchaseDate">
                          <input readonly formControlName="purchaseDateToString" class="form-control" type="text" id="purchaseTime"/>
                          <span class="input-group-addon">
                            <span class="fa fa-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label >购买价格(元)&nbsp;</label>
                        <input formControlName="vehicleValue" type="text" class="form-control " id="vehicleValue"/>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >年检时间&nbsp;</label>
                        <div class="input-group date" id="annualCheckDate">
                          <input readonly formControlName="annualCheckDateToString" class="form-control" type="text" id="annualCheckTime"/>
                          <span class="input-group-addon">
                            <span class="fa fa-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>车位&nbsp;</label>
                        <input formControlName="carport" type="text" class="form-control " id="carport"/>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >发动机型号</label>
                        <input formControlName="engineModel" type="text" class="form-control " id="engineModel"/>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >额定载客数&nbsp;</label>
                        <input formControlName="passengerCapacity" type="text" class="form-control " id="passengerCapacity"/>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >额定载重量</label>
                        <input formControlName="loadCapacity" type="text" class="form-control " id="loadCapacity"/>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label  >ETC安装&nbsp;</label>
                        <!--<input formControlName="loadCapacity" type="text" class="form-control " id="loadCapacity"/>-->

                        <div>
                          <nz-radio-group formControlName="etc" [(ngModel)]="radioValue" class="etc">
                            <label nz-radio [nzValue]="1">
                              <span>是</span>
                            </label>
                            <label nz-radio [nzValue]="0">
                              <span>否</span>
                            </label>
                          </nz-radio-group>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-12">
                      <div class="form-group">
                        <label  >车辆图片</label>
                        <div>
                          <input class="inputfile" id="imgfile" type="file" ng2FileSelect  [uploader]="imguploader" (change)="selectedImgOnChanged($event)"  placeholder="请选择要上传的文件" multiple>
                          <label for="imgfile">选择图片</label>
                          <button *ngIf="imgList?.length>0" id="delimg" type="button" class="btn btn-default btn-sm btnImageDel" (click)="delImgClick()">
                            删除图片
                          </button>
                          <label *ngIf="imgList?.length>0" for="delimg">删除图片</label>
                        </div>
                      </div>
                      <div class="form-group" *ngFor="let img of imgList" >
                        <label class="control-label col-sm-offset-2 col-sm-3">
                          <a href="{{ img?.filePath }}">
                            <img src="{{ img?.filePath }}" width="250px" height="180px">
                          </a>
                        </label>
                      </div>
                    </div>
                    <div class="col-lg-12">
                      <div class="form-group" >
                        <label  >备注</label>
                        <textarea formControlName="description" class="form-control textareastyle" id="description"></textarea>
                      </div>
                    </div>
                    <div class="col-lg-12">
                      <app-file-upload></app-file-upload>
                    </div>
                    <div class="panel-body">
                      <div class="form-group">
                        <div class="pull-right" style=" margin-top: 30px;">
                          <button class="btn btn-primary" type="button" [disabled]="!btnDisabled" (click)="updateInfo(vehicleForm.value)">修改</button>
                          <button class="btn btn-default" type="button" [disabled]="btnDisabled" (click)="onSubmit(vehicleForm.value)">新增</button>
                          <button class="btn btn-default" type="button" [disabled]="!btnDisabled" (click)="delType()">删除</button>
                          <button class="btn btn-default" type="button" (click)="clear()">清空</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  </form>
                </div>
                <div class="tab-pane " id="panel-2">
                  <app-maintain-record-home></app-maintain-record-home>
                </div>
                <div class="tab-pane" id="panel-3">
                  <app-cam-record-home></app-cam-record-home>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>



      <div class="panel-body">

        <form action="#" class="form-horizontal ">

          <div>

            <div class="input-group m-bot15" >

              <input class="form-control" placeholder="车辆名称" type="text" style="  margin-left: 75%;width: 25%; " [formControl]="searchParam" id="searchpa">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" (click)="searchInfo()"><i class="fa fa-search"></i></button>
              </span>
            </div>

          </div>
          <nz-table #vehicleTable
                    [nzBordered]="true"
                    [nzDataSource]="_dataSet"
                    [nzShowSizeChanger]="true"
                    [nzTotal]="_total"
                    [(nzPageIndex)]="_current"
                    (nzPageIndexChange)="refreshData()"
                    [(nzPageSize)]="_pageSize"
                    (nzPageSizeChange)="refreshData(true)"
                    (nzDataChange)="vehicleDisplayDataChange($event)">
            <thead nz-thead>
            <tr>
              <th class="table-header" nz-th [nzWidth]="'20%'">
                <span>车辆名称</span>
              </th>
              <th class="table-header" nz-th [nzWidth]="'20%'">
                <span>车牌号</span>
              </th>
              <th class="table-header" nz-th [nzWidth]="'20%'">
                <span>司机</span>
              </th>
              <th class="table-header" nz-th [nzWidth]="'20%'">
                <span>司机电话</span>
              </th>
              <th class="table-header" nz-th [nzWidth]="'20%'">
                <span>额定载客数</span>
              </th>
              <!--<th class="table-header" nz-th [nzWidth]="'5%'">-->
              <!--<span>删除</span>-->
              <!--</th>-->
            </tr>
            </thead>
            <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of vehicleTable.data" [class.selected]="data === selected" (click)="onSelect(data)" >
              <td nz-td >{{data.name}}</td>
              <td nz-td >{{data.licenseNumber}}</td>
              <td nz-td >{{data.driverName}}</td>
              <td nz-td >{{data.driverPhone}}</td>
              <td nz-td >{{data.passengerCapacity}}</td>
              <!--<td nz-td><i class="fa fa-times" aria-hidden="true" style="color:#424F63;" (click)="delType(data)"></i></td>-->
            </tr>
            </tbody>
          </nz-table>

        </form>
      </div>
    </div>
    <!--body wrapper end-->
  </div>
  <!-- main content end-->
</section>

<!-- 司机开窗modal -->
<nz-modal id="udgModal"  [nzVisible]="driverIsVisible" [nzTitle]="'人员开窗'" [nzContent]="driverModalContent"
          [nzFooter]="false" (nzOnCancel)="driverHandleCancel($event)" >
  <ng-template #driverModalContent>
    <app-driver-table></app-driver-table>
  </ng-template>
</nz-modal>
<!-- modal -->
